<template>
  <div class="thirdView" :style="transScale">
    <!-- 头部 -->
    <div class="header">
      <div class="title">
        <span>{{ queryInfo.company}}</span>
        <span class="second">- {{ queryInfo.text }}</span>
      </div>
      <!-- <search-view class="searchView"></search-view> -->
      <img class="chilun1" src="../../assets/images/bigViewIMG/chilun1.png" alt="">
      <img class="chilun2" src="../../assets/images/bigViewIMG/chilun2.png" alt="">
      <div class="dateTime">
        <div class="date">{{ date }}</div>
        <div class="time">{{time}}</div>
        <div class="week">{{weekDate}}</div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="breadNav">
      <div class="left">
        <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
        <div class="add">当前位置：</div>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案</el-breadcrumb-item>
    
        <el-breadcrumb-item :to="{ path: topath }">档案全景</el-breadcrumb-item>
        <el-breadcrumb-item>体检档案</el-breadcrumb-item>
    
      </el-breadcrumb>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <div class="main-top-title">
        <Title name="企业体检情况"></Title>
      </div>
      <!-- 搜索框 -->
      <div class="main-form">
        <el-form ref="form" :model="sizeForm" inline size="medium">
          <el-form-item>
            <el-input v-model="sizeForm.customCode" placeholder="输入企业海关编码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="sizeForm.customName" placeholder="输入企业名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchForm" icon="el-icon-search">查询</el-button>
            <el-button plain @click="clearForm" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 企业整体风险分析报告打印 -->
      <div class="print">
        <el-button type="primary" >企业整体风险分析报告打印</el-button>
      </div>
      <!-- tab栏 -->
      <div class="main-tabs">
        <div class="btn" @click="active=0" :class="active==0?'selected':''">归类风险</div>
        <div class="btn" @click="active=1" :class="active==1?'selected':''">价格风险</div>
        <div class="btn" @click="active=2" :class="active==2?'selected':''">原产地风险</div>
        <div class="btn" @click="active=3" :class="active==3?'selected':''">其他风险</div>
      </div>
      <!-- 二级tab栏 -->
      <div class="secondTabs" v-if="active==0">
        <div class="secondTabs-btn" @click="secondActiveOne=0" :class="secondActiveOne==0?'secondSelected':''">归类一致性分析</div>
        <div class="secondTabs-btn" @click="secondActiveOne=1" :class="secondActiveOne==1?'secondSelected':''">归类行业性分析</div>
        <div class="secondTabs-btn" @click="secondActiveOne=2" :class="secondActiveOne==2?'secondSelected':''">归类准确性分析</div>
      </div>

      <div class="secondTabs" v-if="active==1">
        <div class="secondTabs-btn" @click="secondActiveTwo=0" :class="secondActiveTwo==0?'secondSelected':''">价格一致性之波动异常</div>
        <div class="secondTabs-btn" @click="secondActiveTwo=1" :class="secondActiveTwo==1?'secondSelected':''">价格一致性分析之价格长期不变</div>
        <div class="secondTabs-btn" @click="secondActiveTwo=2" :class="secondActiveTwo==2?'secondSelected':''">价格一致性之贸易方式单价异常</div>
        <div class="secondTabs-btn" @click="secondActiveTwo=3" :class="secondActiveTwo==3?'secondSelected':''">价格行业性分析</div>
      </div>

      <div class="secondTabs" v-if="active==2">
        <div class="secondTabs-btn" @click="secondActiveThree=0" :class="secondActiveThree==0?'secondSelected':''">原产地异常</div>
      </div>
      
      <div class="secondTabs" v-if="active==3">
        <div class="secondTabs-btn" @click="secondActiveFour=0" :class="secondActiveFour==0?'secondSelected':''">境外发货人特殊关系异常</div>
        <div class="secondTabs-btn" @click="secondActiveFour=1" :class="secondActiveFour==1?'secondSelected':''">境外收货人特殊关系异常</div>
       
      </div>

      <!-- 表格 -->
      <div class="main-table">
        <el-table :data="tableData" style="width: 100%" :cell-style="{ color: '#fff' }"  :header-cell-style="{ color: '#fff' }">
          <el-table-column type="index" label="序号">
          </el-table-column>
          <el-table-column prop="goodsName" label="品名">
          </el-table-column>
          <el-table-column prop="specificationsModels" label="规格型号">
          </el-table-column>
          <el-table-column prop="code" label="商品编码">
          </el-table-column>
          <el-table-column prop="amountOf" label="金额占比">
          </el-table-column>
          <el-table-column prop="customsNumber" label="报关单号">
          </el-table-column>
          <el-table-column prop="declareDate" label="申报日期">
          </el-table-column>
          <el-table-column prop="regulatory" label="监管证件">
          </el-table-column>
          <el-table-column prop="discountsTaxRate" label="最惠国进口关税率">
          </el-table-column>
          <el-table-column prop="taxRate" label="普通进口关税率">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
          <el-table-column label="操作" width="300">
            <el-button size="mini" type="primary" plain>分析结果</el-button>
            <el-button type="success" plain size="mini">人工甄别</el-button>
            <el-button type="danger" plain size="mini">删除</el-button>
            <el-button type="primary" plain size="mini">打印</el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>
   
  </div>
</template>

<script>
import Title from './components/title.vue'
// import searchView from './components/searchView.vue'
import { encrypt, decrypt } from '@/utils/AES.js'

import { getDate, getTime, getWeekDate } from "@/utils/date.js";
export default {
  components:{
    Title,
    // searchView
  },
  data(){
    return {
      client: ["1920", "1080"],
      scale_x: 1,
      scale_y: 1,
      sizeForm: {
        customCode: null,
        customName: null,
        
      },
      active:0,
      secondActiveOne:0,
      secondActiveTwo:0,
      secondActiveThree:0,
      secondActiveFour:0,
      tableData: [
        {
          id: 1,
          goodsName:'1',
          specificationsModels:'1',
          code: 'H73773830903',
          amountOf:'1',
          customsNumber:'H73773830903',
          declareDate:'2022-1-1',
          regulatory:'1',
          discountsTaxRate:'1%',
          taxRate:'2%',
          remark:''
        },
        {
          id: 2,
          goodsName: '1',
          specificationsModels: '1',
          code: 'H73773830903',
          amountOf: '1',
          customsNumber: 'H73773830903',
          declareDate: '2022-1-1',
          regulatory: '1',
          discountsTaxRate: '1%',
          taxRate: '2%',
          remark: ''
        },
        {
          id: 3,
          goodsName: '1',
          specificationsModels: '1',
          code: 'H73773830903',
          amountOf: '1',
          customsNumber: 'H73773830903',
          declareDate: '2022-1-1',
          regulatory: '1',
          discountsTaxRate: '1%',
          taxRate: '2%',
          remark: ''
        },
        {
          id: 4,
          goodsName: '1',
          specificationsModels: '1',
          code: 'H73773830903',
          amountOf: '1',
          customsNumber: 'H73773830903',
          declareDate: '2022-1-1',
          regulatory: '1',
          discountsTaxRate: '1%',
          taxRate: '2%',
          remark: ''
        },
      ],
      date: "2021-01-01",
      time: "00:00:00",
      weekDate: "星期一",
      timer: null,
    }
  },
  created() {
    
  },
  computed: {
    queryInfo() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      return query
    },
    topath() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      let keyInfo = encrypt(JSON.stringify({
        company: query.company,
        tradeCo: query.tradeCo
      }))
      let code = encodeURIComponent(keyInfo)
      if (!query.company) {
        return '/visual/bigscreen/viewer?reportCode=SecondView'
      } else {

        return `/visual/bigscreen/viewer?reportCode=SecondView&key=${code}`
      }


    },
    transScale() {
      return `transform: scale(${this.scale_x}, ${this.scale_y});
              background-size: 100% 100%;
              transform-origin: left top; 
              overflow: hidden;
              width:${this.client[0]}px;height:${this.client[1]}px;position: absolute;`;
    }
  },
  mounted(){
    this.initClock();
    this.timer = setInterval(() => {
      this.initClock();
    }, 1000);
    window.addEventListener("resize", this.resizeHandler);
    this.resizeHandler();
  },
  methods: {
    initClock() {
      this.date = getDate();
      this.time = getTime();
      this.weekDate = getWeekDate();
    },
    clearForm() {
      this.sizeForm = {
        customCode: null,
        customName: null,
        
      }
      this.searchForm()
    },
    searchForm() {
      // console.log(this.sizeForm)
    },  
    resizeHandler() {
      this.scale_x = `${document.documentElement.clientWidth}` / this.client[0];
      this.scale_y = `${document.documentElement.clientHeight}` / this.client[1];
    },
   
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      
    }
    window.removeEventListener("resize", this.resizeHandler);
  },
}
</script>

<style lang="scss" scoped>
.thirdView {
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bigViewIMG/bg.png') no-repeat;
  background-size: 100% 100%;
  // padding: 0 20px;
  .header {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
  
      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
  
        width: 100%;
        height: 70px;
        background-image: url('../../assets/images/bigViewIMG/navbar.png');
        background-size: 100% 100%;
  
        span {
          font-size: 32px;
          color: #00ffff;
          font-weight: 400;
        }
  
        .second {
          margin-left: 5px;
          font-size: 32px;
          color: #00ffff;
          font-weight: 400;
          // font-family: '华文楷体'
        }
      }
  
      .searchView {
        position: absolute;
        top: 22px;
        left: 23px;
      }
  
      .chilun1 {
        width: 138px;
        height: 48px;
        position: absolute;
        top: 22px;
        left: 1252px;
      }
  
      .chilun2 {
        width: 138px;
        height: 48px;
        position: absolute;
        top: 22px;
        left: 506px;
      }
  
      .dateTime {
        position: absolute;
        top: 20px;
        left: 1575px;
        width: 325px;
        height: 36px;
        display: flex;
        color: #fff;
        // text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
  
        .time {
          margin-left: 5px;
        }
  
        .week {
          margin-left: 5px;
        }
      }
    }
    .breadNav {
      margin-left: 10px;
      height: 40px;
      display: flex;
      align-items: center;
  
      .left {
        display: flex;
        align-items: center;
  
        img {
          width: 16px;
          height: 16px;
        }
  
        .add {
          margin-left: 10px;
          margin-right: 10px;
          color: #fff;
          font-size: 16px;
        }
      }
  
      ::v-deep .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner {
            color: #00ffff;
            font-size: 16px;
          }
  
          .is-link {
            color: #fff;
          }
        }
      }
    }
  .main {
    margin-top: 20px;
    width: 100%;
    // height: 800px;
    // border: #005f95 1px solid;
    .main-top-title {
      padding-left: 10px;
    }
    .main-form {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      ::v-deep .el-input .el-input__inner {
          height: 36px;
          line-height: 36px;
        }
      
        ::v-deep .el-button {
          padding: 10px 20px;
          font-size: 14px;
          border-radius: 3px;
        }
    }
    .print {
      padding: 0 20px;
          ::v-deep .el-button {
              padding: 10px 20px;
              font-size: 14px;
              border-radius: 3px;
            }
    }
    .main-tabs {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .btn {
          width: 200px;
          height: 48px;
          background: url('../../assets/images/u428.png') no-repeat;
          background-size: 200px 48px;
          margin-right: 10px;
          text-align: center;
          line-height: 48px;
          color: #fff;
          cursor: pointer;
        }
      
        .selected {
          background: url('../../assets/images/u428_selected.png') no-repeat;
          background-size: 200px 48px;
        }
    }
    .secondTabs {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      .secondTabs-btn {
          font-size: 14px;
          width: 220px;
          height: 30px;
          line-height: 29px;
          text-align: center;
          color: rgba(123, 188, 239, 0.8);
          cursor: pointer;
        
      }
      .secondSelected {
        border: 1px solid rgba(123, 188, 239, 0.8);
        border-radius: 3px;
      }
    }
    .main-table {
      margin: 20px 20px;
      ::v-deep .el-button {
          padding: 6px 8px;
          font-size: 12px;
          border-radius: 6px;
        }
      
        ::v-deep .el-table,
        ::v-deep .el-table__expanded-cell {
          background-color: transparent !important;
      
        }
      
        /* 表格内背景颜色 */
        ::v-deep .el-table th,
        ::v-deep .el-table tr,
        ::v-deep .el-table td {
          background-color: transparent !important;
          border-bottom: none;
        }
      
        ::v-deep .el-table td {
          border-bottom: none;
        }
      
        ::v-deep .el-table::before {
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0px;
        }
    }
  }
}
</style>